<script lang="ts" setup>
import { ApiWkTaskList, ApiWkMyOrderTaskList } from "@@/api/wk/list";
import { _require } from "@@/utils/tools";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import { ApiTaskDetails } from "@@/api/wk/index";
import { getCountdown } from "@@/utils/tools/date";
import dayjs from "dayjs";
import { WkTaskStatus, wkTaskStatus } from "@@/enum/globalEnum";

const props = defineProps<{
  details: ApiTaskDetails.Data | undefined;
  task: RequiredBy<Partial<ApiWkTaskList.DataItem>, "id">;
  orderTask: Omit<ApiWkMyOrderTaskList.DataItem, "task"> | undefined;
  currentDate: dayjs.Dayjs;
}>();
const { t } = useI18n();
const countdown = computed(() => {
  if (!props.details?.auto_finish_time) return "--";
  const res = getCountdown(
    props.currentDate,
    dayjs(props.details.auto_finish_time)
  );
  if (res.diffTime < 0) return t("yiChaoShi");
  return `${res.H}:${res.m}:${res.s}`;
});
const showCountdown = computed(
  () =>
    (props.details?.status || props.task.status) === WkTaskStatus.ORDER_ACCEPT
);
</script>
<template>
  <div class="flex-A-C flex-J-SB">
    <div>
      <div class="T-S-sm">
        <span>{{ omitText(props.details?.user.address) }}</span>
        <span class="C-M1">
          ({{ $t("xin-yu-du-0") }}{{ props.details?.reputation }})</span
        >
      </div>
      <div class="C-T4 MT-xs">
        {{
          dayjs(props.details?.created_at || props.task.created_at).format(
            "YYYY-MM-DD HH:mm:ss"
          )
        }}
      </div>
    </div>
    <BwkLevel :level="props.details?.user.level || props.task?.user?.level" />
  </div>
  <div
    v-if="showCountdown"
    class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs"
  >
    <Cicon name="icon-shijian" />
    <div class="ML-xs">{{ $t("daoJiShi") }}</div>
    <div class="ML-auto">{{ countdown }}</div>
  </div>
  <Ccard>
    <div class="flex-A-C">
      <Rimage size="38rem" :src="_require('src/assets/images/icon/star.svg')" />
      <div class="ML-xs">
        {{ props.details?.introduction || props.task.introduction }}
      </div>
    </div>
    <Ccard bg="var(--C-B3)" border-style="none" class="MT-md PT-xs PB-xs">
      <Ccell border-mode="bottom">
        <span class="C-T3">{{ $t("ren-wu-ben-jin") }}</span>
        <template #right>
          <span class="C-warn">
            {{ fixedDecimals(props.details?.capital || props.task.capital, 2) }}
            U
          </span>
        </template>
      </Ccell>
      <Ccell border-mode="bottom">
        <span class="C-T3">{{ $t("ren-wu-yong-jin") }}</span>
        <template #right>
          <span class="C-M1">
            {{
              fixedDecimals(
                props.details?.commission || props.task.commission,
                2
              )
            }}
            U
          </span>
        </template>
      </Ccell>
      <Ccell border-mode="bottom">
        <span class="C-T3">{{ $t("ren-wu-shi-xian") }}</span>
        <template #right>
          <span>{{ fixedDecimals(props.details?.order_limit_time) }} h</span>
        </template>
      </Ccell>
      <Ccell border-mode="none">
        <span class="C-T3">{{ $t("renWuZhuangTai") }}</span>
        <template #right>
          <CstateTag
            radius="var(--R-sm)"
            :value="props.details?.status || props.task.status"
            :enum="wkTaskStatus"
          />
        </template>
      </Ccell>
    </Ccard>

    <Ccard bg="var(--C-B3)" border-style="none" class="MT-sm PT-xs PB-xs">
      <Ccell border-mode="bottom">
        <span class="C-T3">{{ $t("dingDanBianHao") }}</span>
        <template #right>
          <CcopyText :copy-text="props.details?.task_no || props.task.task_no">
            {{ props.details?.task_no || props.task.task_no }}
          </CcopyText>
        </template>
      </Ccell>
      <Ccell border-mode="none">
        <span class="C-T3">{{ $t('faBuHash') }}</span>
        <template #right>
          <CcopyText :copy-text="props.details?.txid || props.task.txid">
            {{ omitText(props.details?.txid || props.task.txid) }}
          </CcopyText>
        </template>
      </Ccell>
    </Ccard>

    <Ccard
      v-if="props.details?.task_order"
      bg="var(--C-B3)"
      border-style="none"
      class="MT-sm PT-xs PB-xs"
    >
      <Ccell border-mode="none">
        <span class="C-T3">{{ $t('jieDanHash') }}</span>
        <template #right>
          <CcopyText :copy-text="props.details.task_order.txid">
            {{ omitText(props.details.task_order.txid) }}
          </CcopyText>
        </template>
      </Ccell>
      <Ccell border-mode="none">
        <span class="C-T3">{{ $t('zhiFuZhuangTai') }}</span>
        <template #right>
          <CstateTag
            :value="props.details.task_order.status"
            :enum="wkTaskStatus"
          />
        </template>
      </Ccell>
    </Ccard>
  </Ccard>
  <Ccard>
    <h3>{{ $t("nei-rong-xu-qiu") }}</h3>
    <div class="C-T3 MT-sm" v-html="props.details?.details"></div>
    <CimagesPreview class="MT-sm" :images="props.details?.images" />
  </Ccard>
</template>
<style lang="scss" scoped></style>
